<template>
  <div>
    <!-- Main content -->
    <section class='content'>
      <div class='row'>
        <div class='col-xs-12'>
          <div class='box box-solid'>
            <button class='btn btn-info'>定制宝</button>
            <button class='btn btn-default pull-right' style='float: right;' @click='display_time'>时间段选择</button>
            <button class='btn btn-default pull-right' style='margin-right: 10px; float: right;' @click='area'>地区选择</button>
          </div>
          <div style='margin-bottom: 25px;text-align: right;' v-show='vshow'>
            <span>起始：</span><input class='datepicker start' data-date-format='yyyy-mm-dd' style='margin-right: 50px;'></input>
            <span>终止：</span><input class='datepicker end' data-date-format='yyyy-mm-dd'></input>
          </div>
          <div style='margin-bottom: 25px;text-align: right;' v-show='vshow1'>
            <select id='province' style='margin-right: 20px;'></select>
            <select id='city'></select>
          </div>
          <div class='box'>
            <div class='box-header'>
              <h3 class='box-title'>分类统计</h3>
            </div>
            <!-- /.box-header -->
            <div class='box-body'>
              <table id='example1' class='table table-bordered table-hover'>
                <thead>
                <tr>
                  <th>分类统计</th>
                  <th>订单数</th>
                  <th>订单数占比(%)</th>
                  <th>销售数量</th>
                  <th>销售数量占比(%)</th>
                  <th>销售金额</th>
                  <th>销售金额占比(%)</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
          <div class='box'>
            <div class='box-header'>
              <h3 class='box-title'>尺码统计</h3>
            </div>
            <!-- /.box-header -->
            <div class='box-body'>
              <table id='example2' class='table table-bordered table-hover'>
                <thead>
                <tr>
                  <th>尺码统计</th>
                  <th>订单数</th>
                  <th>订单数占比(%)</th>
                  <th>销售数量</th>
                  <th>销售数量占比(%)</th>
                  <th>销售金额</th>
                  <th>销售金额占比(%)</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
          <div class='box'>
            <div class='box-header'>
              <h3 class='box-title'>颜色统计</h3>
            </div>
            <!-- /.box-header -->
            <div class='box-body'>
              <table id='example3' class='table table-bordered table-hover'>
                <thead>
                <tr>
                  <th>颜色统计</th>
                  <th>订单数</th>
                  <th>订单数占比(%)</th>
                  <th>销售数量</th>
                  <th>销售数量占比(%)</th>
                  <th>销售金额</th>
                  <th>销售金额占比(%)</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
          <div class='box'>
            <div class='box-header'>
              <h3 class='box-title'>风格统计</h3>
            </div>
            <!-- /.box-header -->
            <div class='box-body'>
              <table id='example4' class='table table-bordered table-hover'>
                <thead>
                <tr>
                  <th>风格统计</th>
                  <th>订单数</th>
                  <th>订单数占比(%)</th>
                  <th>销售数量</th>
                  <th>销售数量占比(%)</th>
                  <th>销售金额</th>
                  <th>销售金额占比(%)</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
          <div class='box'>
            <div class='box-header'>
              <h3 class='box-title'>季节统计</h3>
            </div>
            <!-- /.box-header -->
            <div class='box-body'>
              <table id='example5' class='table table-bordered table-hover'>
                <thead>
                <tr>
                  <th>季节统计</th>
                  <th>订单数</th>
                  <th>订单数占比(%)</th>
                  <th>销售数量</th>
                  <th>销售数量占比(%)</th>
                  <th>销售金额</th>
                  <th>销售金额占比(%)</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
  </div>
</template>
<script>
  import $ from 'jquery'
  import 'datatables.net'
  import 'datatables.net-bs'
  import 'bootstrap-datepicker'
  import config from '../../../config'
  import {addAddr} from '../../../../static/js/common/utils'

  export default {
    name: 'order_attri',
    data: function () {
      return {
        vshow: false,
        vshow1: false
      }
    },
    methods: {
      query: function () {
        var time = {}
        if ($('input.start').val() === '' && $('input.start').val() === '') {
          time = null
        } else {
          time.start = $('input.start').val()
          time.end = $('input.end').val()
        }
        var zones = null
        var value = $('#city').find('option:selected').val()
        if (value !== '') {
          var province = $('#province').find('option:selected').val()
          zones = {}
          zones.province = province
          zones.city = value
        }

        this.getdata(time, zones)
      },
      display_time: function () {
        this.vshow = !this.vshow
      },
      area: function () {
        this.vshow1 = !this.vshow1
      },
      getdata: function (time, zones) {
        var aggregationStr = '织物成分结构纱支工艺图案用途人群功能时效季节产地'
        for (var i = 0; i < 5; ++i) {
          var params = {}
          params.type = aggregationStr.substring(i * 2, 2 * i + 2)
          if (time != null) {
            params.start = time.start
            params.end = time.end
          }
          if (zones != null) {
            params.province = zones.province
            params.city = zones.city
          }
          $.ajax({
            type: 'POST',
            url: config.serverURI + '/demo/order/aggregation',
            data: JSON.stringify(params),
            'headers': {
              'content-type': 'application/json'
            },
            dataType: 'json',
            success: function (data) {
              // console.log(dataArr)
              var tablebodyhtml = ''
              data.array.forEach(function (item, key) {
                tablebodyhtml += '<tr>'
                tablebodyhtml += '<td>' + item.key + '</td>'
                tablebodyhtml += '<td>' + item.v1 + '</td>'
                tablebodyhtml += '<td>' + item.p1 + '</td>'
                tablebodyhtml += '<td>' + item.v2 + '</td>'
                tablebodyhtml += '<td>' + item.p2 + '</td>'
                tablebodyhtml += '<td>' + item.v3 + '</td>'
                tablebodyhtml += '<td>' + item.p3 + '</td>'
                tablebodyhtml += '</tr>'
              })
              $('#example' + (aggregationStr.indexOf(data.type) / 2 + 1) + ' tbody').html(tablebodyhtml)
            }
          })
        }
      }
    },
    mounted () {
      var $this0 = this
      this.$nextTick(() => {
        $.fn.datepicker.dates['zh-CN'] = {
          days: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
          daysShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          daysMin: ['日', '一', '二', '三', '四', '五', '六', '日'],
          months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          monthsShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          today: '今日',
          format: 'yyyy年mm月dd日',
          weekStart: 1
        }

        $('.datepicker').datepicker({
          language: 'zh-CN',
          showOnFocus: true
        }).on('changeDate', function () {
          $this0.query()
        })

        $.ajax({
          type: 'GET',
          url: config.serverURI + '/demo/order/times',
          data: '',
          'headers': {
            'content-type': 'application/json'
          },
          dataType: 'json',
          success: function (data) {
            $('input.start').datepicker('update', data.start)
            $('input.end').datepicker('update', data.end)
          }
        })

        $.ajax({
          type: 'GET',
          url: config.serverURI + '/demo/order/zones',
          data: '',
          'headers': {
            'content-type': 'application/json'
          },
          dataType: 'json',
          success: function (data) {
            addAddr(data, null, null, $this0.query)
          }
        })

        $this0.query()
      })
    }
  }
</script>

<style>
@import url('/static/plugins/datatables/dataTables.bootstrap.css');

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
  font-family: 'FontAwesome';
}

table.dataTable thead .sorting:after {
  content: '\f0dc';
}

table.dataTable thead .sorting_asc:after {
  content: '\f0dd';
}

table.dataTable thead .sorting_desc:after {
  content: '\f0de';
}
</style>
